<template>
  <div class="Big"  v-loading="loading">
    <h1><span style="color: red;">卖</span><span style="color: aqua;">房</span><span style="color: red;">就找</span><span style="color: burlywood;">奇迹房</span></h1>
    <h4  style="color: burlywood;">专为养老的温馨之家</h4>
    <!-- 登录 -->
    <div v-if="d" class="small">
      <p>Login Now</p>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" style="width: 200px;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button @click="d=false">注册></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册 -->
    <div class = "small" v-if = "!d">
      <p>register Now</p>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="再次输入" prop="repassword">
          <el-input v-model="ruleForm.repassword" type="password" autocomplete="off" style="width: 200px;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register()">注册</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button @click="d=true">登录></el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Usertoken } from '../../stores/token'
import { useRouter } from 'vue-router';
import {instance} from '@/utils/MyRequeest'
const loading = ref(false)

/* 路由 */
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const d = ref(true)

const chekusername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const revalidatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error('两次输入的密码不一样'))
  }else {
    callback()
  }
}
const ruleForm = reactive({
  username: '',
  password: '',
  repassword:''
})
const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  username: [{ validator: chekusername, trigger: 'blur' }],
  repassword:[{ validator: revalidatePass, trigger: 'blur' }]
})

/* 登录 */
import { ElMessage } from 'element-plus'

const submitForm = () => {
  if (ruleForm.password!==''&&ruleForm.username!=='') { 
    loading.value = true
    instance({
    method: 'post',
    url: '/user/login',
    data: {
      username: ruleForm.username,
      password: ruleForm.password
    },
    timeout:5000
  }).then((res) => {
    
    if(res.data.code===1){
       Usertoken().token = res.data.data
    loading.value = false
    router.push({
  path:'/index'
})
ElMessage({
    message: '登录成功,欢迎你',
    type: 'success',
  })
    }
    else {
       console.log(res.data.msg);
    loading.value = false
    ElMessage.error(res.data.msg)
    resetForm(ruleFormRef.value)
    }

   
    /* catch就是状态码不是2XX */
  }).catch((res)=>{
    loading.value = false
   ElMessage.error("网络错误")
  })
 } else {
   ElMessage.warning("请输入完全")
  }
 
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/* 注册 */
const register = () =>{
  if (ruleForm.password === ruleForm.repassword && ruleForm.username!==''&&ruleForm.password!=='') {
   instance({
    method:'post',
    url: '/user/adduser',
    data: {
      username: ruleForm.username,
      password: ruleForm.password
    }
  }).then((res)=>{
    console.log(res.data);
    
    if(res.data.code===1){
      ElMessage.success("注册成功")
    d.value = true
    ruleForm.password = ''
    ruleForm.repassword = ''
    ruleForm.username = ''
    }
    else {
      ElMessage.error(res.data.msg)
    }

  })
}
else {
  ElMessage.success("请输入正确的账号密码")
}
 
}

</script>
<style scoped>
.Big {
  width: 1200px;
  height: 598px;
  margin: auto;
  background-image: url('../../assets//0049.jpg_wh860.jpg');
  background-repeat: no-repeat;
}
.Big  h1 {
  color: white;
  font-size: 30px;
  text-align: center;
}
.Big h4 {
  text-align: center;
}
.Big .small {
  width: 400px;
  margin: auto;
  background-color: rgb(0,0,0,0.5);
  margin-top: 100px;
  padding: 30px 30px 30px 10px;
  border-radius: 20px;
  box-shadow: 1px 1px 10px 1px rgb(0, 0, 0, 0.5);
}
.small p {
  text-align: center;
  color: white;
  font-size: 30px;
  margin-bottom: 30px;
}
</style>
